import { h, fragment } from '@knno/dom/jsx';
import { Calendar } from '@knno/ui/jsx/calendar';
import { bar } from './index.css';
import { Dialog } from '@knno/ui/dialog';

export function ShowCalendar() {
	return (
		<>
			<h2>日历</h2>
			<div class={bar}></div>
			<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
				<Calendar
					mode="year"
					range
					min={new Date('2022-01-01')}
					onpick={function (evt) {
						console.log(this.text());
					}}
				/>
				<Calendar
					mode="month"
					range
					min={new Date('2022-02-01')}
					onpick={function (evt) {
						console.log(this.text());
					}}
				/>
				<Calendar
					mode="date"
					min={new Date('2022-01-01')}
					max={new Date('2024-12-20')}
					onpick={function (evt) {
						console.log(this.text());
					}}
				/>
				<Calendar
					mode="date"
					range
					min={new Date('2022-01-01')}
					max={new Date('2024-12-20')}
					onpick={function (evt) {
						console.log(this.text());
					}}
				/>
			</div>
		</>
	);
}
